import React, { useState, useRef, useEffect } from 'react'
import { Space, Table, Tag, Modal, Button, message, Tooltip } from 'antd';
import {finduser, getmonitor,deletemonitor} from '@/api/monitor'
import Showuser from '@/components/showuserinfo/index'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'

const Animalmanagement = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [userdata, setUser] = useState([])
  const [infodata, setinfo] = useState([])
  // const [open, setOpen] = useState(false);
  const [isinfoVisible, setinfoVisible] = useState(false)
  const UpdateForm = useRef(null)

  const { confirm } = Modal
  const getdata = async () => {
    let { data: { users } } = await getmonitor();
    console.log(users);
    setUser(users)
  }
  useEffect(() => {
    getdata()
  }, [])
  const showinfo = async (item) => {
    let { id, name } = item;
    setinfo(item)
    await finduser(id).then((response) => {
      let { data: { userdata } } = response;
      setinfo(userdata[0])
      setinfoVisible(true)
      // console.log(userdata[0]);
    }).catch(e => {
      // console.log(e);
      message.error("数据返回错误,该用户信息不存在")
    })
    // console.log(UpdateForm.Prototype);
  }
  const handleOk = () => {
    setinfoVisible(false)
    // 用户信息打印
    console.log( window.document.getElementById('xiuer').innerHTML);
    window.document.body.innerHTML = window.document.getElementById('xiuer').innerHTML;
    window.print();
    window.location.reload();
  };

  const confirmMethod = (item) => {
    confirm({
        title: '你确定要删除?',
        icon: <ExclamationCircleOutlined />,
        // content: 'Some descriptions',
        onOk() {
            // console.log(item);
            //   console.log('OK');
            deleteMethod(item)
        },
        onCancel() {
            //   console.log('Cancel');
        },
    });
}


const deleteMethod = (item) => {
  // const { id, role, patientindex } = item;
    const { id } = item;
    deletemonitor({ id }).then(res => {
      message.success("删除成功")
      getdata()
    })

}
  const text = <span>用户信息打印下载</span>;
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '账号',
      dataIndex: 'nickName',
      key: 'nickName',
      render: (text) => <h3>{text}</h3>,
    },
    {
      title: '操作人',
      dataIndex: 'title',
      key: 'title',
      render: (text) => <h3>{text}</h3>,
    },
   
    {
      title: '具体操作',
      dataIndex: 'conterlist1',
      key: 'conterlist1',
    },
  
    {
      title: '操作时间',
      dataIndex: 'birth',
      key: 'birth',
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <Button danger  icon={<DeleteOutlined />} onClick={() => confirmMethod(item)}>删除</Button>
        </div>
      }
    }
  ]
  return (
    <div>
      <Table columns={columns} dataSource={userdata}
        pagination={{
          pageSize: 6
        }}
        rowKey={item => item.id} />
      <Modal
        open={isinfoVisible}
        destroyOnClose={true}
        title="用户健康分析"
        width={900}
        // okText="更新"
        // cancelText="取消"
        onCancel={() => {
          setinfoVisible(false)
          // setisUpdateDisabled(!isUpdateDisabled)
        }}
        footer={[
          // 重点：定义右下角 
          <Button key="back" onClick={() => setinfoVisible(false)}>
            关闭
          </Button>,
          <Tooltip key="submit" placement="bottomLeft" title={text} >
            <Button type="primary" onClick={handleOk}>下载打印</Button>
          </Tooltip>
        ]}
      // onOk={() => updateFormOK()}
      >
        <Showuser ref={infodata}></Showuser>
      </Modal>
    </div>
  )
}

export default Animalmanagement